<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js学习笔记</title>
</head>
<style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        display: flex;
        justify-content: space-between;
        width: 1100px;
        height: 500px;
    }
    .box .box-left{
        width: 500px;
        height: 500px;
        background-color: #f00;
    }
    .box .box-right{
        position: relative;
        width: 600px;
        height: 500px;
        background-color: #0f0;
    }
    .box .box-right .demo{
        position: absolute;
        width: 200px;
        height: 200px;
        right:0;
        bottom: 0;
        background-color: #00f;
    }


</style>
<body>
    <!--复习flex布局-->
    <div class="box">
        <div class="box-left"></div>
        <div class="box-right">
            <div class="demo">
                <!--定位到右下角-->
            </div>
        </div>
    </div>
    <script>
        //ES6-ES13的新特性
        //1.标签模板字符串
        function foo(...args){
            console.log(args);
        }
        var name='chy'
        var age=18
        //使用反引号进行标签模板的引入
        foo`my name is ${name},my age is ${age}`
        //Symbol的简单使用，生成属性名字
        const s1=Symbol()
        const obj={
            [s1]:'1111'
        }
        console.log(obj);
        //新标准常用的函数
        //flatMap函数：先映射、在flat
        const messages=[
            "hello world",
            "world hello",
            "chy hello",
        ]
        //使用flatMap进行分割，一步到位
        const finalMessages=messages.flatMap(item => item.split(' '))
        console.log(finalMessages)
        //BigInt表示大数->在整数后面加一个n
        //空值合并运算符??
        let info=""
        info=info ?? "默认值" //空字符串可以用了，只有null和undefined才会采用默认值了
        console.log(info)
        //可选链
        const chy={
            name:"chy",
            age:18,
            friend:{
                name: "php",
                running:()=>{
                    console.log('running')
                }
            }
        }
        //所有的地方都可能为空，都要可选链
        chy?.friend?.running?.()
        //Proxy代理对象，通过代理对象进行源对象熟悉那个修改
        const chyProxy=new Proxy(chy,{
            get:(target,key)=>{
                console.log(`get:监听属性${key}`)
                return target[key]
            },
            set:(target,key,value)=>{
                console.log(`set:监听属性${key}`)
                target[key]=value
            }
        }) //监听对象，监听的动作(是一个对象)
        console.log(chyProxy.name)
        chyProxy.name='kobe'
    //Reflect代理对象
    const res=Reflect.deleteProperty(obj,'eating')
    console.log(res);
    //重点，Promise的使用
    /*案例：累加求和，延迟2秒执行，判断传递的上界top是否大于0，大于0成功计算
    小于0错误返回
    */
   function addtoTop(top){
      const promise=new Promise((resolve,reject)=>{
            let result=0
            if(top > 0) {
                for(let i=1;i<top;++i) {
                    result+=i
                }
                resolve(result) //这里的result最终会作为then方法回调函数的番薯
            }
            else {
                reject(`top输入有问题,${top}的值比0小`) //reject函数的参数会作为catch的参数
            }
      })
      return promise
   }
   //测试，第一次传入10 第二次传入-1
   addtoTop(10).then(res=>{
    console.log(`调用成功,计算结果是${res}`)
   }).catch(err=>{
    console.log(err)
   })
   addtoTop(-1).then(res=>{
    console.log(res)
   }).catch(err=>{
    console.log(err)
   })
    </script>
</body>
</html>